<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
    let ctx = document
        .getElementById("canvas")
        .getContext("2d");
    // left-black-big
    ctx.beginPath();
    ctx.fillStyle = "#000";
    //ctx.strokeStyle='#ccc';
    ctx.arc(250,250,200,Math.PI/2,Math.PI*1.5,false);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    // right-white-big
    ctx.beginPath();
    ctx.fillStyle = "#fff";
    ctx.arc(250,250,200,Math.PI/2,Math.PI*1.5,true);

    ctx.closePath();
    ctx.stroke();
    ctx.fill();
    // top-black-middle
    ctx.beginPath();
    ctx.fillStyle = "#000";
    ctx.arc(250,150,100,Math.PI/2,Math.PI*1.5,true);
    ctx.closePath();
    ctx.fill();
    // bottom-white-middle
    ctx.beginPath();
    ctx.fillStyle = "#fff";
    ctx.arc(250,350,100,Math.PI/2,Math.PI*1.5,false);
    ctx.closePath();
    ctx.fill();
    // top-white-small
    ctx.beginPath();
    ctx.fillStyle = "#fff";
    ctx.arc(250,150,25,0,Math.PI*2);
    ctx.closePath();
    ctx.fill();
    // bottom-black-small
    ctx.beginPath();
    ctx.fillStyle = "#000";
    ctx.arc(250,350,25,0,Math.PI*2);
    ctx.closePath();
    ctx.fill();

    ctx.beginPath();
    ctx.arc(250,250,200,0,2*Math.PI);
    ctx.closePath();
    ctx.stroke();


</script>
</body>
</html>